<script setup>
import { useRouter } from 'vue-router'
import auth from "@/utils/auth.js";
import {ElMessage} from "element-plus";

import { onMounted } from "vue";

onMounted(()=> {
  document.title = '学习堵智能教育平台-学生端'
})

const router = useRouter()
const handleMenuSelect = (index) => {
  // 根据菜单索引跳转到对应路由
  const pathMap = {
    '1': '/student/home',
    '2': '/student/message',
    '3': '/student/class',
    '4': '/student/chat',
    '5': '/student/courseSelection',
    '6': '/student/examination',
    '7': '/student/grades'
  }
  router.push(pathMap[index])
}
const handleLogout = () => {
  auth.removeToken()
  router.push('/login')
  ElMessage.success('已退出登录')
}
</script>
<template>
  <div class="common-layout">
    <el-container>
      <el-header class="head" >
        <el-dropdown>
          <el-button style="margin-top: 10px;margin-left: 20px" type="info" circle>
            <el-icon :size="20">
              <User/>
            </el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu @click="handleLogout">退出登录</el-dropdown-menu>
          </template>
        </el-dropdown>
        <div style="margin-left: 600px; margin-top: 15px">
          <a href="https://www.baidu.com" target="_blank" style="text-decoration: none; color: inherit;">
            <span>广告招商位</span>
          </a>
        </div>
      </el-header>
      <!-- 中间容器：水平布局 -->
      <el-container>
        <el-aside width="200px">
          <!-- 侧边栏导航 - 跳转到不同子路由 -->
          <el-menu
              default-active="1"
              @select="handleMenuSelect"
          >
            <el-menu-item index="1">
              <el-icon><House /></el-icon>
              <span>首页</span>
            </el-menu-item>
            <el-menu-item index="2">
              <el-icon><ChatDotRound /></el-icon>
              <span>消息</span>
            </el-menu-item>
            <el-menu-item index="3">
              <el-icon><Notebook /></el-icon>
              <span>课程</span>
            </el-menu-item>
            <el-menu-item index="4">
              <el-icon><ChatRound /></el-icon>
              <span>ai问答</span>
            </el-menu-item>

            <el-menu-item index="5">
              <span>选课</span>
            </el-menu-item>
            <el-menu-item index="6">
              <span>考试</span>
            </el-menu-item>
            <el-menu-item index="7">
              <span>成绩</span>
            </el-menu-item>



            <el-menu-item index="8">
              <el-icon><setting /></el-icon>
              <span>设置</span>
            </el-menu-item>

          </el-menu>
        </el-aside>

        <!-- Main区域 - 子路由页面将在这里显示 -->
        <el-main>
          <!-- 路由出口：子路由对应的组件会渲染到这里 -->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.head {
  display: flex;
  text-align: center;
  background: #29df2c;
}
</style>
